<template>
	<view>
		<!-- 加了fixed -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<view class="balance_box">
					<image src="/static/index/index17.png" mode="" ></image>
					<!-- <text></text> -->
					<input type="text" value="" placeholder="请输入关键词进行搜索" />
				</view>
				<!-- 右边自定义图片 -->
				<navigator url="./seach_text" class="more"   >搜索</navigator>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height:  100rpx ;background-color: #000000;">
		</view>
		<view class="hengxian">
			
		</view>
		<view class="lishijilu">
			<view class="lishijilu_top">
				<view class="text">
					历史纪录
				</view>
				<view class="">
					<image @click="clearHistory" src="/static/seach/shanchu.png" mode="" style="width: 27rpx;height: 29rpx;"></image>
				</view>
			</view>
			<view class="data_box">
				<view class="data_list" v-for="(item,index) in data" :key="index">
					{{item.keywords}}
				</view>
			</view>
			
		</view>
		<view class="hengxian">
			
		</view>
		<view class="bottom_box">
			<view class="bottom_box_top">
				<image src="/static/seach/esou.png" style="width: 37rpx;height:45rpx" mode=""></image>
				<text>热搜</text>
			</view>
			<view class="mt20" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
				<view class="list_get" v-for="(item,index) in list" :key="index">
					{{item.keywords}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Require from '@/common/require.js';
	export default {
		data() {
			return {
				data:[],
				list:[]
			}
		},
		onLoad() {
			var self = this
			Require.commonRequest({
				url: '/api/history/mine',
				data:{
					type:1,
					size:10,
				},
				success: function(ret) {
					if(ret.data.data !=''){
						self.data=ret.data.data	
					}
				},
				fail: function() {
					uni.showToast({
						icon: "none",
						title: "网络异常，请稍后再试"
					})
				}
			});
			Require.commonRequest({
				url: '/api/history/hot',
				data:{
					type:1,
					size:10,
				},
				success: function(ret) {
					if(ret.data.code == 200){
						self.list=ret.data.data;
					}
				},
				fail: function() {
					uni.showToast({
						icon: "none",
						title: "网络异常，请稍后再试"
					})
				}
			})
		},
		methods: {
			back(){
				uni.navigateBack({
					
				})
			},
			clearHistory(){
				Require.commonRequest({
					url: '/api/history/clear',
					data:{
						type:1,
					},
					success: function(ret) {
						if(ret.data.code ==200){
							uni.redirectTo({
								url:'seach'
							})
						}
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color:white;
		box-sizing: border-box;
	}
.more {
	   font-size: 32rpx;
	   background: linear-gradient(45deg, rgba(212, 32, 238, 1) 0%, rgba(115, 34, 216, 1) 100%);
	   -webkit-background-clip: text;
	   color: transparent;
   }
   .balance_box{
	   width:538rpx;
	   height:60rpx;
	   background:rgba(229,229,229,1);
	   border-radius:30rpx;
	   background: rgba(229, 229, 229, 1);
	   color: #8E8E8E;
	   display: flex;
	   align-items: center;
	   font-size: 26rpx;
	   padding-left: 20rpx;
   }
   .navtop{
	   display: flex;
	   justify-content: space-between;
	   width: 750rpx;
	   align-items: center;
	   box-sizing: border-box;
	   padding-right: 38rpx;
	   
   }
   .balance_box image{
	   	width: 26rpx;
	   	height: 26rpx;
	   	margin-right: 9rpx;
   }
   .hengxian{
	   height: 10rpx;
	   width: 750rpx;
	   background-color: #EFEFF4;
   }
   .lishijilu{
	   width:750rpx;
	   padding: 30rpx 36rpx;
	   box-sizing: border-box;
	   background:rgba(255,255,255,1);
	   .lishijilu_top{
		   display: flex;
		   justify-content: space-between;
		   .text{
			   font-size:30rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(46,46,46,1);
		   }
	   }
	   .data_box{
		   display: flex;
		   flex-wrap: wrap;
		   justify-content: space-between;
		   padding-right: 40rpx;
		   .data_list{
			   font-size: 30rpx;
			   padding: 10rpx;
			   background-color: #B990EB;
			   color: white;
			   border-radius:8rpx;
			   margin-bottom: 10rpx;
		   }
	   }
   }
   .bottom_box{
	   width: 750rpx;
	   padding: 31rpx 35rpx;
	   box-sizing: border-box;
   }
   .bottom_box_top{
	   display: flex;
	   align-items: center;
	   text{
		   margin-left: 10rpx;
	   }
   }
   .list_get{
	   border:2rpx solid rgba(229,229,229,1);
	   border-radius:50rpx;
	   padding: 13rpx;
	   font-size: 28rpx;
	   text-align: center;
	   margin-bottom: 10rpx;
   }
</style>
